<template>
<div id="setting">
    <div class='photoShow' v-title="title">
        <div id="purchased">
            <div class="purchased-top">
                <i class="iconfont icon-fanhui" @click="back()"></i>
                <span>{{title}}</span>
            </div>
        </div>
        <!--展示头像-->
        <div>
            <div class="header-per">
                <div class="header-Img" :class="{'head-image':headerImage}">
                    <img :src="headerImage" v-if="headerType">
                    <div class="setting-img">
                        <img src="../../assets/image/common/cream.png">
                    </div>
                    <input type="file" id="change"  accept="image/*" @change="change">
                    <label for="change"></label>
                </div>
            </div>
            <!--设置项-->
            <div class="settingList">
                <set-name :option="nickName" class="border-bottom"></set-name>
                <set-name :option="name" class="border-bottom"></set-name>
                <div class="setList border-bottom" >
                    <div class="setList-left">手机号</div>
                    <div class="setList-right">
                        <span class="phoneNum">{{ user.phone }}</span>
                        <!--<i class="iconfont icon-jiantou"></i>-->
                    </div>
                </div>
                <set-brief :descripthion="user.descripthion"></set-brief>
            </div>
            <!--企智设置项-->
            <div class="settingList">
                <set-account class="border-bottom" :user="userMore"></set-account>
                <router-link :to="{name:'profile'}">
                    <div class="setList">
                        <div class="setList-left">关于运联网</div>
                        <div class="setList-right">
                            <i class="iconfont icon-jiantou"></i>
                        </div>
                    </div>
                </router-link>
            </div>
            <!--退出-->
            <div class="exit" @click="exit()">退出登录</div>
        </div>
    </div>
    <!--展示上传头像截图区-->
    <div class="container" v-if="url">
        <vueCropper :imgUrl="url" @uploadUrl="uploadUrl"></vueCropper>
    </div>
    <!--退出提示-->
    <div class="exitBox" v-if="exitBox">
        <div class="exitBoxTop">确认退出登录么？</div>
        <div class="exitBoxBottom">
            <div class="exitBoxBottomBtn" @click="exitBox=false;">取消</div>
            <div class="exitBoxBottomBtn2" @click="exitDate=true;exit()">确定</div>
        </div>
    </div>
    <div class="hintShow" v-if="exitBox"></div>
</div>
</template>

<script>
    import {commonService} from '../../service/commonService'
    import {userService} from '../../service/userService'
    import vueCropper from '../../component/common/vue-cropper.vue'
    import setName from '../../component/mycenter/name.vue'
    import setBrief from '../../component/mycenter/brief.vue'
    import setAccount from '../../component/mycenter/set-account.vue'

    export default {
        components: { 'vueCropper':vueCropper ,'set-name':setName ,'set-brief':setBrief,'set-account':setAccount },
        data(){
            return{
                title:'设置',
                option:{},
                user:{},
                userMore:{},
                nickName:{title:'昵称',keyword:'nickName'},
                name:{title:'真实姓名',keyword:'name'},
                url:'',
                headerImage:'',//设置头像
                headerImageSrc:'',//上传的头像路径
                headerType:'',
                wxName:'我是微信号',
                setState:1,//1.主页。2.名字。3.性别。4.简介。5.收货地址页面。6.新增地址页。
                remnant:'30',
                exitDate:false,
                exitBox:false,
            }
        },
        mounted:function(){
            let that = this;
            //微信绑定第二步
            let wxBind = window.localStorage.getItem('wxBind')
            if(wxBind){
                this.wxBind();
            }
            //判断浏览器
            function isWeiXin() {
                var ua = window.navigator.userAgent.toLowerCase();
               if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    return true;
                } else {
                    return false;
                }
            }
            if(isWeiXin()) this.wxShow = true;
            userService.myCenter().then(function (res) {
                that.user = res.data.datas.user;
                that.userMore = res.data.datas;
                that.nickName = {
                    title:'昵称',
                    value:that.user.nickName,
                    keyword:'nickName'
                };
                that.name = {
                    title:'真实姓名',
                    value:that.user.name,
                    keyword:'name'
                };
                if(that.user.name == null || that.user.name == ''){that.name.value = '暂无'}
                if(that.user.descripthion == null || that.user.descripthion == ''){that.user.descripthion = '暂无'}
                let reg = /^(\d{3})\d{4}(\d{4})$/;
                that.user.phone = that.user.phone.replace(reg, "$1****$2");
                that.user.password = res.data.datas.baseUser.password;
                that.headerType = that.user.headImg;
                that.headerImage = that.$store.state.picHead + that.user.headImg;
                that.wxlogin = baseUser.unionid ? true : false;
            }).catch(function(err){
//                console.log(err);
            })
        },
        methods:{
            //返回个人中心
            back:function(){
                this.$router.push({name:'mycenter'})
            },
            //绑定手机号
            setPhone:function(){
                this.$router.push({name:'setPhone'})
            },
            //绑定微信号
            wxOn:function(){
                if(!this.wxlogin){//未绑定
                    userService.getWxpay({loginType:'WEIXIN',platform:'WXH5',jumpRouter:'wxBind',wxscope:'snsapi_userinfo'}).then(function(res){
                        let code = res.data.code;
                        window.localStorage.setItem('code',code);
                        if(code === 200){
                            //获取静默授权地址成功
                            window.localStorage.setItem('wxBind',true);
                            window.location.href = res.data.datas;
                        }
                    })
                }
            },
            //绑定微信号第二步
            wxBind:function(){
                let that = this;
                let code = that.$route.params.code;
                if(!code){
                    code = window.localStorage.getItem('code')
                }
                userService.wxBind({code: code}).then(function (res) {
                    if(res.data.success){
                        that.wxlogin = true;
                        window.localStorage.removeItem('wxBind')
                    }
                })
            },
            //退出登录
            exit:function(){
                let that = this;
                that.exitBox = true;
                if(that.exitDate){
                    userService.myExit().then(function(res){
                        if(res.data.success){
                            window.localStorage.removeItem('token');
                            that.$router.replace({name:'home'});
                        }
                    })
                }
            },
            //以下为上传头像方法
            getObjectURL (file) {
                let url = null ;
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
            },
            change (e) {
                let files = e.target.files || e.dataTransfer.files;
                if (!files.length) return;
                this.panel = true;
                this.picValue = files[0];

                this.url = this.getObjectURL(this.picValue);
                //每次替换图片要重新得到新的url
                this.option.img=this.url
                this.panel = true;

            },
            uploadUrl (img) {
                let that = this
                that.url = ''
                if(img){
                    userService.myCenterSet({headImg:img}).then(function(res){
                        if(res.data.success){
                            that.$router.go(0)
                        }
                    })
                }
            },
        },
    }
</script>

<style lang="less">
@import url('../../assets/css/theme.less');
@import url('../../assets/css/size.less');
body{
     background:#F9F9F9;
 }
#setting{
    background:#F9F9F9;
    padding-bottom: 0.2rem;
    margin:auto;
    text-align: center;
}
.hintShow{
    width:100%;
    background:#333;
    opacity: 0.6;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    z-index:90;
}
.exitBox{
    width:80%;
    height:3.7rem;
    border-radius: 6px;
    background:#fff;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    z-index:100;
    .exitBoxTop{
        width:100%;
        height:2.6rem;
        line-height:2.6rem;
        text-align: center;
        font-size:16px;
    }
    .exitBoxBottom{
        width:100%;
        height:1.1rem;
        line-height:1.1rem;
        border-top:1px solid #e9e9e9;
        .exitBoxBottomBtn{
            width:50%;
            float:left;
            text-align: center;
            color:#bbbbbb;
            font-size:15px;
        }
        .exitBoxBottomBtn2{
            width:calc(50% - 1px);
            border-left:1px solid #e9e9e9;
            float:left;
            text-align: center;
            color:#20A0FF;
            font-size:15px;
        }
    }
}

.photoShow{
    padding-bottom:0.3rem;
    background:#F9F9F9;
}
.set-wrap{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: #f0f0f0;
    z-index: 99;
}
.purchased-top{
    width:100%;
    height:1.2rem;
    background:#fff;
    position: relative;
    i{
        float:left;
        font-size:0.5rem;
        line-height:1.2rem;
        margin-left:0.2rem;
        color:#999999;
        display: block;
        position:absolute;
        font-weight:600;
    }
    span{
        /*margin-left:-1rem;*/
        height:1.2rem;
        line-height:1.2rem;
        font-size: 18px;
        color: #333333;
        letter-spacing: 0.3px;
    }
}
.header-per{
    width:100%;
    height:3.2rem;
    background:#fff;
    position: relative;
    .header-Img{
        width:2.1rem;
        height:2.1rem;
        position: absolute;
        left:0;
        top:0;
        bottom:0;
        right:0;
        margin:auto;
        background: rgba(255,255,255,0.50);
        box-shadow: 0 0 10px 0 rgba(0,0,0,0.06);
        border-radius: 100px;
        padding: 1px;
        img{
            width:100%;
            height:100%;
            border-radius: 100%;
            overflow: hidden;
        }
        .icon-wodetianchong {
            font-size: 1.5rem;
            color: #fff;
            line-height: 2rem;
        }
        .round{
            background:#f0f0f0;
            width: 1.47rem;
            height: 1.47rem;
            float: left;
            border-radius: 50%;
            text-align: center;
            padding-left: .1rem;
            box-sizing: border-box;
            border:1px solid #f0f0f0;
        }
        input{
            width:100%;
            height:2.1rem;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
        .setting-img{
            width:0.64rem;
            height:0.64rem;
            position:absolute;
            right:0;
            bottom:0;
            background:#fff;
            border-radius: 100px;
            box-shadow: 0 0 10px 0 rgba(0,0,0,0.06);
            line-height:0.64rem;
            i{
                color:#EEEEEE;
                font-size:14px;
            }
            img{
                width:50%;
                height:50%;
                position:absolute;
                right:0;
                bottom:0;
                top:0;
                left:0;
                margin:auto;
            }
        }
    }
}
.settingList{
    width:100%;
    padding-left:0.53rem;
    margin:0.27rem 0;
    background:#fff;
    box-sizing: border-box;
    .setList{
        width:100%;
        min-height:@size50;
        overflow: auto;
        .setList-left{
            width:30%;
            height:@size50;
            line-height:@size50;
            float:left;
            text-align: left;
            font-size: 16px;
            color: #333333;
            letter-spacing: 0;
        }
        .setList-right{
            width:70%;
            min-height:@size50;
            float:right;
            text-align: right;
            box-sizing: border-box;
            font-size: 16px;
            color: #999999;
            line-height:@size50;
            position: relative;
            .phoneNum{
                margin-right:0.3rem;
            }
            i{
                float: right;
                font-size: 0.5rem;
                line-height: @size50;
                color: #EFEFEF;
                display: block;
                padding: 0 5px;
            }
            .wxBindText{
                margin-right:0.4rem;
            }

        }
        .phone{
            padding-right:0.4rem;
            box-sizing: border-box;
        }
        .brief1{
            width:20%;
        }
        .brief{
            width:80%;
            /*padding:0.27rem 0;*/
            line-height:1.333rem;
            font-size:16px;
            overflow: hidden;
            text-overflow:ellipsis;//文本溢出显示省略号
            white-space:nowrap;//文本不会换行（单行文本溢出）
            div{
                width:80%;
                margin-right: 0.75rem;
                float:right;
                padding: 0.2rem 0;
            }
            i{
                position:absolute;
                top:0;
                bottom:0;
                right:0;
                margin:auto;
                display: inline-table;
            }
        }
    }
    .setList:last-child{
        box-shadow:none;
    }
}
.exit{
    width:92%;
    height:1.07rem;
    line-height:1.07rem;
    text-align: center;
    margin:0.6rem auto 0.27rem;
    background:#fff;
    color: #DF4431;
    font-size: 16px;
}
.SaveBtn{
    width:100%;
    height:1.2rem;
    line-height:1.2rem;
    background:#fff;
    text-align: center;
    font-size: 16px;
    color: #999999;
    letter-spacing: 0;
    margin:0.53rem 0;
}
.okSave{
    width:100%;
    height:1.2rem;
    line-height:1.2rem;
    background:#fff;
    text-align: center;
    font-size: 16px;
    color: #1ba1e2;
    letter-spacing: 0;
    margin: 0.53rem 0;
}
.hintpw{
    width:100%;
    height:1rem;
    line-height:1rem;
    font-size: 12px;
    color: #BBBBBB;
    text-align: left;
    padding:0 0.53rem;
    box-sizing: border-box;
}
.hint{
    width:80%;
    height:1.2rem;
    line-height:1.2rem;
    color:#fff;
    background:#333;
    opacity: 0;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
    font-size:14px;
    animation: show_state 2.5s ease 0s;
}
#button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 80px;
    height: 40px;
    border:none;
    border-radius: 5px;
    background:white;
}
.show {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
}
.picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
#image {
    max-width: 100%;
}
.container {
    z-index: 10000;
    position: fixed;
    padding-top: 60px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background:rgba(0,0,0,1);
}

.cropper-view-box,.cropper-face {
    border-radius: 50%;
}
.cropper-container {
    font-size: 0;
    line-height: 0;

    position: relative;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    direction: ltr;
    -ms-touch-action: none;
    touch-action: none
}
.cropper-container img {
    /* Avoid margin top issue (Occur only when margin-top <= -height) */
    display: block;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100%;
    height: 100%;
    image-orientation: 0deg
}
.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.cropper-wrap-box {
    overflow: hidden;
}
.cropper-drag-box {
    opacity: 0;
    background-color: #fff;
}
.cropper-modal {
    opacity: .5;
    background-color: #000;
}
.cropper-view-box {
    display: block;
    overflow: hidden;

    width: 100%;
    height: 100%;

    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
}
.cropper-dashed {
    position: absolute;

    display: block;

    opacity: .5;
    border: 0 dashed #eee
}
.cropper-dashed.dashed-h {
    top: 33.33333%;
    left: 0;
    width: 100%;
    height: 33.33333%;
    border-top-width: 1px;
    border-bottom-width: 1px
}
.cropper-dashed.dashed-v {
    top: 0;
    left: 33.33333%;
    width: 33.33333%;
    height: 100%;
    border-right-width: 1px;
    border-left-width: 1px
}
.cropper-center {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;

    width: 0;
    height: 0;

    opacity: .75
}
.cropper-center:before,
.cropper-center:after {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #eee
}
.cropper-center:before {
    top: 0;
    left: -3px;
    width: 7px;
    height: 1px
}
.cropper-center:after {
    top: -3px;
    left: 0;
    width: 1px;
    height: 7px
}
.cropper-face,
.cropper-line,
.cropper-point {
    position: absolute;

    display: block;

    width: 100%;
    height: 100%;

    opacity: .1;
}
.cropper-face {
    top: 0;
    left: 0;

    background-color: #fff;
}
.cropper-line {
    background-color: #39f
}
.cropper-line.line-e {
    top: 0;
    right: -3px;
    width: 5px;
    cursor: e-resize
}
.cropper-line.line-n {
    top: -3px;
    left: 0;
    height: 5px;
    cursor: n-resize
}
.cropper-line.line-w {
    top: 0;
    left: -3px;
    width: 5px;
    cursor: w-resize
}
.cropper-line.line-s {
    bottom: -3px;
    left: 0;
    height: 5px;
    cursor: s-resize
}
.cropper-point {
    width: 5px;
    height: 5px;

    opacity: .75;
    background-color: #39f
}
.cropper-point.point-e {
    top: 50%;
    right: -3px;
    margin-top: -3px;
    cursor: e-resize
}
.cropper-point.point-n {
    top: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: n-resize
}
.cropper-point.point-w {
    top: 50%;
    left: -3px;
    margin-top: -3px;
    cursor: w-resize
}
.cropper-point.point-s {
    bottom: -3px;
    left: 50%;
    margin-left: -3px;
    cursor: s-resize
}
.cropper-point.point-ne {
    top: -3px;
    right: -3px;
    cursor: ne-resize
}
.cropper-point.point-nw {
    top: -3px;
    left: -3px;
    cursor: nw-resize
}
.cropper-point.point-sw {
    bottom: -3px;
    left: -3px;
    cursor: sw-resize
}
.cropper-point.point-se {
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    cursor: se-resize;
    opacity: 1
}
@media (min-width: 768px) {

    .cropper-point.point-se {
        width: 15px;
        height: 15px
    }
}
@media (min-width: 992px) {

    .cropper-point.point-se {
        width: 10px;
        height: 10px
    }
}
@media (min-width: 1200px) {

    .cropper-point.point-se {
        width: 5px;
        height: 5px;
        opacity: .75
    }
}
.cropper-point.point-se:before {
    position: absolute;
    right: -50%;
    bottom: -50%;
    display: block;
    width: 200%;
    height: 200%;
    content: ' ';
    opacity: 0;
    background-color: #39f
}
.cropper-invisible {
    opacity: 0;
}
.cropper-bg {
    background-image: url('');
}
.cropper-hide {
    position: absolute;

    display: block;

    width: 0;
    height: 0;
}
.cropper-hidden {
    display: none !important;
}
.cropper-move {
    cursor: move;
}
.cropper-crop {
    cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}
.delectBox{
    width:70%;
    height:3rem;
    box-sizing: border-box;
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    text-align: center;
    border:1px solid #eee;
    background: #FFFFFF;
    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.12);
    border-radius: 12px;
    z-index:1000;
    .delectBox-top{
        width:100%;
        height:1.8rem;
        line-height:1.8rem;
        text-align: center;
        font-size:14px;
        color: #333333;
    }
    .delectBox-btn{
        width:100%;
        height:1.2rem;
        font-size:14px;
        .yes{
            width:50%;
            height:1.2rem;
            line-height:1.2rem;
            float:right;
            color:#007AFF;
        }
        .no{
            width:calc(50% - 1px);
            height:1.2rem;
            line-height:1.2rem;
            float:right;
            color:#999;
        }
    }
}
</style>